<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AE-圣诞树</title>
    <style>
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: black;
        }
        #main {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #video1 {
            max-width: 80%;  /* 可以根据需要调整 */
            max-height: 80%; /* 可以根据需要调整 */
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
  
    <body id="app">
			<div id="main">
			<video id="video1" muted="muted" autoplay="autoplay" loop="loop" src="./video/chrismas.mp4">
			</video>
			<audio id="music1" autostart="true" loop="loop" preload="auto" controls hidden="true">
				<source src="./music/jinniandongtianpeizhewoba.mp3"></source>
			</audio>

		</div>


	</body>
	<script type="text/javascript">
		var video = document.getElementById("video1");
		video.playbackRate *= 0.8;
		video.play();
		$(function() {
			// var video = document.getElementById("video1");
			// video.src = "";
			// video.play();

			// var music = document.getElementById("music1");
			// music.src = "";
			// music.play();
		});
	</script>
	<script>
		var myAuto = document.getElementById('music1');
		var app = document.getElementById("app");
		// 监听事件
		app.addEventListener("mousemove", function() {
			console.log("played");
			myAuto.play();
		}, true);

		// 用定时器触发事件
		setInterval(function() {
			if ("createEvent" in document) {
				var evt = document.createEvent("HTMLEvents");
				evt.initEvent("mousemove", false, true);
				app.dispatchEvent(evt);
			} else{
				app.fireEvent("onmousemove");
			}
		}, 1000);

</script>
</html>
